<template>
  <div class="box">
    <template v-if="route.query.TwoDepart">
      <Registration></Registration>
    </template>
    <template v-else>
      <div class="order">
        <el-card >
        <template #header>
          <p class="title">挂号订单</p>
        </template>
        <el-form class="demo-form-inline" :model="formOrder" :inline="true">
          <el-form-item label="就诊人">
            <el-select placeholder="请选择就诊人" v-model="formOrder.patientId" @change="changePatient" >
              <el-option
                v-for="item in patientList"
                :label="item.name"
                :value="item._id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="formOrder.orderStatus" @change="changeOrderStatus" >
              <el-option label="全部" :value="3"></el-option>
              <el-option label="已支付" :value="1"></el-option>
              <el-option label="已预约,待支付" :value="0"></el-option>
              <el-option label="已取消" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table border :data="orderList" >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column label="就诊时间" align="center" width="180" >
            <template #default="{row}" >
                {{ row.scheduleId?.date }}
                {{ row.scheduleId?.endTime }} 前
            </template>
          </el-table-column>
          <el-table-column label="医院" align="center" width="180" >
            <template #default="{row}" >
                武汉第一人民医院
            </template>
          </el-table-column>
          <el-table-column label="科室" align="center" width="150" >
            <template #default="{row}" >
                <!--  -->
                {{ row.doctorId?.TweDepart }}
            </template>
          </el-table-column>
          <el-table-column label="医生" align="center" width="120" >
            <template #default="{row}" >
                {{ row.doctorId?.job?.jName }}
            </template>
          </el-table-column>
          <el-table-column label="服务费" align="center">
            <template #default="{row}" >
                {{ row.scheduleId?.price }} 元
            </template>
          </el-table-column>
          <el-table-column label="就诊人" align="center" width="130" >
            <template #default="{row}" >
                {{ row.patientId?.name }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center" width="130" >
            <template #default="{row}" >
                {{ row.registerStatus==0?'已预约,待支付':row.registerStatus==1?'已支付':row.registerStatus==2?'已取消':'已过期' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right"  label="操作" align="center">
            <template #default="{row}" >
                <el-button type="primary" link @click="goDetail(row._id)" >详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        class="pagination"
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[5,10, 20, 30, 40]"
          background
          layout="jumper,prev, pager, next,total, sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getPatientListAPI } from "@/api/patient";
import { getOrderListAPI } from '@/api/order'
import { useRoute , useRouter } from "vue-router";

import Registration from "./Registration/index.vue";
let route = useRoute();
let router = useRouter()
let formOrder = reactive({
  patientId: "",
  orderStatus: 3,
});
let patientList = ref([]);
let pageNo = ref(1)
let pageSize = ref(10)
let total = ref(0)
let orderList = ref([])
let orderListCopy = ref([])
onMounted(() => {
  getPatientList();
  getOrderList()
});
const getPatientList = async () => {
  let result = await getPatientListAPI();
  patientList.value = result.data;
};
//就诊人修改的回调
const changePatient = (val)=>{
    formOrder.patientId = val
    getOrderList()
}
//状态修改的回调
const changeOrderStatus = (val)=>{
    if(val==3) {
        return getOrderList()
    }
    orderList.value = orderListCopy.value.filter(item=>item.registerStatus==val)
    total.value = orderList.value.length
}
//获取订单列表
const getOrderList = async ()=>{
    let result = await getOrderListAPI({
        patientId:formOrder.patientId
    },pageNo.value,pageSize.value)
    orderList.value = result.data
    orderListCopy.value = result.data
    total.value = result.total
}
const handleSizeChange = (val) => {
  pageSize.value = val;
  getOrderList()
};
const handleCurrentChange = (val) => {
  pageNo.value = val;
  getOrderList()
};
const goDetail = (id)=>{
    router.push({
        path:'/user/detail',
        query:{
            id:id
        }
    })
}

</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  .demo-form-inline {
    // display: flex;
    .el-select {
      --el-select-width: 220px;
    }
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px
  }
  .title {
    font-size: 20px;
  }
}
</style>
